<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>04-jQuery元素操作</title>
  <script src="jquery.js"></script>
</head>

<body>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <script>
    // 需求: 需要针对于同一类元素做不同的操作，需要用到遍历元素(类似for，但是比for强大)
    // 1. element.each(function(index, domEle){})
    // index: 索引号，名称随意指定
    // domEle: dom元素对象

    // a. 将需要改变的颜色使用一个等长数组存储其颜色值
    var arr = ["red", "blue", "green"];
    // b. 存储总和sum
    var sum = 0;
    $('div').each(
      function (index, domElement) {
        console.log(index);
        // 因为回调函数中第二个参数是dom元素对象，所以需要将其转换为jQuery对象 $()
        console.log(domElement);

        // 根据不同的索引号更换不同的颜色
        $(domElement).css("color", arr[index]);
        // parseInt(): 转换为整数型
        sum += parseInt($(domElement).text());
      }
    );
    console.log("总和为", sum);


    // 2. $.each(obj, function(index, ele){}) 可以遍历数组 对象 主要用于计算处理
    // obj: 传入的对象或者数组或者元素
    // index: 索引号，名称随意指定
    // ele: dom元素对象
    // a. 遍历数组
    $.each(arr, function (i, ele) {
      console.log(i);    // 下标
      console.log(ele);  // 值
    })

    // b. 遍历对象
    $.each({
      name: "chen",
      age: 18
    }, function (i, ele) {
      console.log(i);    // 属性名
      console.log(ele);  // 属性值
    })
  </script>
</body>

</html>